<script setup>
// 客户群发页
import { ref, reactive, toRef, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { postCustomerGroupList, postCustomerGroupAlert } from '@/api'
import Detail from './cbstable/detail.vue'
import NewSend from './newsend/newsend.vue'
const router = useRouter()
const dialogVisible = ref(false)
const newaddVisible = ref(false)
const cbsdetail = ref(null)

const countList = ref([])
const currentPage = ref(1) //页码
const pageSize = ref(10) //	条数
const GroupTag = async () => {
	const r = postCustomerGroupList({
		page: currentPage.value,
		size: pageSize.value
	})
	if (r) {
		countList.value = res.data
	}
}
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const dateValue1 = ref([])
const nowDetailId = ref('123')
const getData = (val) => {
	if (val && typeof val != 'object') page.value = val
	postCustomerGroupList({
		page: page.value,
		size: pageSize.value,
		times: dateValue1.value || []
	}).then((res) => {
		// console.log(res.data)
		total.value = res.data.count
		tableData.value = res.data.item
		// console.log(aothList)
	})
}
getData()

const input2 = ref('')
const src = ref({
	src: ''
	//  src:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
})

const showDetail = (id) => {
	console.log(id)
	nowDetailId.value = id
	console.log(nowDetailId.value)
	dialogVisible.value = true
}
const newaddClick = () => {
	newaddVisible.value = true
}

const open = (id) => {
	ElMessageBox.confirm('确认后将会给所有未发送成员发送提醒通知，是否发送', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消'
	})
		.then(async () => {
			const r = await postCustomerGroupAlert({
				id: id
			})
			if (r) {
				ElMessage({
					type: 'success',
					message: '提醒成功'
				})
			}
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '提醒失败'
			})
		})
}
</script>

<template>
	<div v-if="!newaddVisible">
		<div v-if="!dialogVisible" style="margin: 20px">
			<div class="table-operation">
				<div class="table-operation-left">
					<el-button type="primary" @click="newaddClick">新增客户群群发</el-button>
				</div>
				<div class="table-operation-right">
					<div class="timeChild" style="display: flex; align-items: center">
						<span class="timeChild-label" style="white-space: nowrap; margin-right: 10px">群发名称:</span>
						<el-input
							v-model="input2"
							style="margin-right: 10px"
							class="w-50 m-2 timeChild-assembly"
							placeholder="请输入"
							:suffix-icon="Search"
						/>
					</div>
					<span class="table-operation-label">发送时间:</span>
					<el-date-picker
						v-model="dateValue1"
						@change="getData"
						value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"
						type="daterange"
						style="width: 215px; height: 32px; margin-left: 5px"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					/>
					<el-button style="margin-left: 20px" @click="getData">搜索</el-button>
				</div>
			</div>
			<!-- 表格部分 -->
			<div class="tableStyle">
				<!-- <div class="tableStyleTop">
				<div style="font-size: 14px; color: #666; font-weight: bold">共6条素材</div>
				<div>
					<el-button type="primary" plain>导出Excel</el-button>
				</div>
			</div> -->
				<!-- table 部分-->
				<div style="padding:15px;border-radius: 5px;">
					<el-table
						:data="tableData"
						style="width: 100%"
						:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
						:cell-style="{ fontSize: '14px', padding: '20px 0' }"
					>
						<el-table-column prop="massContent" label="群发内容" width="200">
							<template #default="scope">
								<div>
									<div>
										<div style="color: #409eff">[共{{ scope.row.size }}条数据]</div>
									</div>
									<span>{{ scope.row.content }}</span>
								</div>
								<div v-if="scope.row.adjunct_data.length != 0">
									<div
										class="app-flex-left"
										style="margin-top: 10px"
										v-for="(item, index) in scope.row.adjunct_data"
										:key="index"
									>
										<el-avatar
											shape="square"
											:src="item.url || item.link_picurl || item.miniprogram_imgurl"
											size="50"
										/>
										<span style="display: inline-block; margin-left: 10px">{{
											item.title || item.link_title || item.miniprogram_title
										}}</span>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="sendType" label="发送类型">
							<template #default="scope">
								{{ scope.row.send_status == 1 ? '立即群发' : '定时群发' }}
							</template>
						</el-table-column>
						<el-table-column prop="send_time" label="发送时间"> </el-table-column>
						<!-- <el-table-column prop="createdBy" label="创建人">
						<template #default="scope">
							<div class="app-words-box">
								<div class="app-flex-left">
									<MyIcon class="app-down-icon primary-font" name="Person" />
									<span class="app-gap-words-left-xs">{{ scope.row.createdBy }}</span>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="creatorDepartment" label="创建人所属部门" /> -->
						<el-table-column prop="detail.send_staff" label="已发送群主" />
						<el-table-column prop="detail.delivery_groups" label="送达群聊" />
						<el-table-column prop="detail.delivery_group" label="未发送群主" />
						<el-table-column prop="detail.unsent_group" label="未送达群聊" />
						<el-table-column prop="operation" label="操作" width="150">
							<template #default="scope">
								<ul class="tableOperation">
									<li @click="open(scope.row.id)">提醒发送</li>
									<li @click="showDetail(scope.row.id)">详情</li>
								</ul>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						class="app-page"
						@current-change="getData"
						background
						layout="prev, pager, next"
						:total="total"
					/>
				</div>
			</div>
			<!-- <div class="app-page">
				<el-pagination
					:current-page="page"
					class="app-page"
					@current-change="getData"
					background
					layout="prev, pager, next"
					:total="total"
				/>
			</div> -->
		</div>
		<Detail v-if="dialogVisible" ref="cbsdetail" :nowDetailId="nowDetailId" @goBack="dialogVisible = false"></Detail>
	</div>
	<div v-else>
		<NewSend ref="newsend" @goBack=";(newaddVisible = false), getData()"></NewSend>
	</div>
</template>
<style>
.allStyle {
	margin: 20px;
}

.topStyle {
	display: flex;
	justify-content: flex-start;
}

.centerSelectStyle {
	position: relative;

	display: flex;
	justify-content: space-between;
	height: 80px;
	background-color: #ffffff;
	border-radius: 10px;
	margin-top: 25px;
}

.centerSelectChild {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.timeChild {
	margin-left: 50px;
	display: flex;
	justify-content: flex-start;
}

.centerSelectChild2 {
	position: absolute;
	right: 20px;
	line-height: 80px;
}

.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 203px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
}

.Child2Content {
	position: absolute;
	top: -27px;
	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
	top: 5px;
}

.tableStyle {
	background-color: #ffffff;
	margin-top: 20px;
	border-radius: 10px;
	padding-bottom: 20px;
}

.tableStyleTop {
	display: flex;
	justify-content: space-between;
	height: 68px;
	line-height: 68px;
	border-bottom: 1px solid #f0f2f5;
	padding: 0 20px;
}

.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 203px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
	background-color: #ffffff;
}

.Child2Content {
	position: absolute;
	top: -27px;
	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
	top: 5px;
}

/* 弹窗 */
.dialogStyle1 {
	display: flex;
	justify-content: flex-start;
}

.filterStyle {
	display: flex;
	justify-content: flex-start;
	margin-top: 5px;
}

.filterStyleBottom {
	float: right;
	margin-top: 100px;
}
.app-page {
	text-align: center;
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.table-operation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-left {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-right {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-label {
	width: 65px;
}
.public-container {
	margin: 20px 20px 0 20px;
	background: #fff;
	padding: 20px 0 0 0;
	border-radius: 10px;
}
.tableHeader {
	height: 40px;
	font-size: 14px;
	color: #909399;
	background: #f7f9fa;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
.el-page-header {
	display: none;
}
</style>
